<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <div class="panel-default">
        {% for article in articles %}
            <li>{{ article.title }}</li>
        {% endfor %}
{#        <ul class="pagination">#}
{#            <li><a href="{{ request.path }}?page=1">&laquo;</a></li>#}
{#            {% if page_obj.has_previous %}#}
{#                <li><a href="{{ request.path }}?&page={{ page_obj.previous_page_number }}">上一页</a></li>#}
{#            {% else %}#}
{#                <li class="previous disabled"><a>上一页</a></li>#}
{#            {% endif %}#}
{#            {% for i in page_obj.paginator.page_range %}#}
{#                <li {% if page_obj.number == i %}class="active"{% endif %}><a href="{{ request.path }}?page={{ i }}">{{ i }}</a></li>#}
{#            {% endfor %}#}
{#            {% if page_obj.has_next %}#}
{#                <li><a href="{{ request.path }}?page={{ page_obj.next_page_number }}">下一页</a></li>#}
{#            {% else %}#}
{#                <li class="previous disabled"><a>下一页</a></li>#}
{#            {% endif %}#}
{#            <li><a href="{{ request.path }}?page={{ page_obj.paginator.num_pages }}">&raquo;</a></li>#}
{#        </ul>#}

        <nav>
            <ul class="pagination">
                {% if page_obj.has_previous %}
                    <li><a href="{% url 'article:article_list' %}?page={{ page_obj.previous_page_number }}">上一页</a></li>
                {% else %}
                    <li class="disabled"><a href="javascript:void(0);">上一页</a></li>
                {% endif %}

                {# 是否要出现...#}
                {% if left_has_more %}
                    <li><a href="{% url 'article:article_list' %}?page=1">1</a></li>
                    <li><a href="javascript:void(0);">...</a></li>
                {% endif %}

                {#左边的页#}
                {% for page in left_pages %}
                   <li><a href="{% url 'article:article_list' %}?page={{ page }}">{{ page }}</a></li>
                {% endfor %}

                {#当前的页#}
                <li class="active"><a href="javascript:void(0);">{{ current_page }}</a></li>

                {#右边的页#}
                {% for page in right_pages %}
                   <li><a href="{% url 'article:article_list' %}?page={{ page }}">{{ page }}</a></li>
                {% endfor %}

                {#右边是否出现...#}
                {% if right_has_more %}
                    <li><a href="javascript:void(0);">...</a></li>
                    <li><a href="{% url 'article:article_list' %}?page={{ num_pages}}">{{ num_pages }}</a></li>
                {% endif %}

                {% if page_obj.has_next %}
                    <li><a href="{% url 'article:article_list' %}?page={{ page_obj.next_page_number }}">下一页</a></li>
                {% else %}
                    <li class="disabled"><a href="javascript:void(0);">下一页</a></li>
                {% endif %}
            </ul>
        </nav>
    </div>
</body>
</html>